<!-- 
        作者：戴荔春 
        时间：2015-06-08
        描述：测试相关-接口访问测试
-->
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script>
			document.write("<script type='text/javascript' src='../../js/core/RayApp/cacheControl.config.js?" + Math.random() + "'></scr" + "ipt>");
		</script>
		<script>
			SrcBoot.output([
				'css/mui.min.css',
				'css/common/common.css',
				'../../css/test/demo_test_interfaceAccess.css'
			]);
		</script>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav bg-blue">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">接口访问测试</h1>
			<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div class="ajax-container">
				<h5>请求类型</h5>
				<select name="select" class="request-type-select" id="request-type-select">
					<option value="GET">GET</option>
					<option value="POST">POST</option>
				</select>
				<h5>接口校验</h5>
				<select name="select" class="request-type-select" id="interface-url-validate">
					<option value="close">关闭</option>
					<option value="open">开启</option>
				</select>
				<h5>请求地址1</h5>
				<textarea class="request-url-input" id="requestUrl" rows="3"></textarea>
				<h5>请求地址2</h5>
				<textarea class="request-url-input validateType common-hidden" id="requestUrl2" rows="3"></textarea>
				</textarea>
				<div id="postParamType" class="common-hidden">
					<h5>Post参数类别</h5>
					<select name="select" class="post-param-type-select" id="post-param-type-select">
						<option value="JSON">JSON</option>
						<option value="String">String</option>
					</select>
				</div>
				<div id="stringParam" class="common-hidden">
					<h5>String参数</h5>
					<textarea class="param-string-input" id="stringData" rows="3"></textarea>
				</div>
				<div id="jsonParam">
					<h5>JSON参数(参数value可以是一个json对象的字符串形式)</h5>
					<div class="param-json-container">
						<li class="tips-item">
							<div class="mui-table-cell mui-col-xs-4 ">
								<h5>参数Name</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-6">
								<h5>参数Value</h5>
							</div>
						</li>
						<div id="json-param-data">

						</div>

						<button type="button" class="btn btn-add-param" id="btnAddParam">添加参数</button>

						<button type="button" class="btn btn-add-param-batch" id="btnAddParamBatch">批量添加</button>
					</div>
				</div>
				<i class="mui-icon mui-icon-plus container-toggle requestType" id="headerToggle">Header</i>
				<div id="headerContainer" class="common-hidden requestType">
					<h5 id="headerToggle">Header</h5>
					<div class="param-json-container ">
						<li class="tips-item">
							<div class="mui-table-cell mui-col-xs-4 ">
								<h5>Header名称</h5>
							</div>
							<div class="mui-table-cell mui-col-xs-6">
								<h5>Header值</h5>
							</div>
						</li>
						<li class="header-item">
							<div class="mui-table-cell mui-col-xs-4 ">
								<input type="text" readonly="readonly" value="X-Requested-With" />
							</div>
							<div class="mui-table-cell mui-col-xs-6">
								<input type="text" readonly="readonly" value="XMLHttpRequest" />
							</div>
						</li>
						<li class="header-item">
							<div class="mui-table-cell mui-col-xs-4 ">
								<input type="text" readonly="readonly" value="Accept" />
							</div>
							<div class="mui-table-cell mui-col-xs-6">
								<input type="text" readonly="readonly" value="application/json" />
							</div>
						</li>
						<li class="header-item">
							<div class="mui-table-cell mui-col-xs-4 ">
								<input type="text" readonly="readonly" value="Content-Type" />
							</div>
							<div class="mui-table-cell mui-col-xs-6">
								<input type="text" readonly="readonly" value="application/x-www-form-urlencoded" />
							</div>
						</li>
					</div>
				</div>
				<h5>状态提示</h5>
				<div class="tips-container status-tips" id="statusTips">

				</div>
				<div class="request-start">
					<button type="button" class="btn requestType btn-example " id="typeGet">请求示例1</button>
					<button type="button" class="btn requestType btn-example" id="typePostJson">请求示例2</button>
					<button type="button" class="btn  btn-example" id="typePostString">请求示例3</button>
					<button type="button" class="btn requestType btn-start-request" id="btn-start-request">发送请求</button>
					<button type="button" class="btn validateType btn-start-request common-hidden" id="btn-start-validate">一键校验</button>
				</div>

				<div class="requestType">
					<h5>Response</h5>
					<div class="tips-container " id="responseTips">

					</div>
				</div>
				<div class="validateType common-hidden">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>url1返回</th>
								<th>url2返回</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td id="responseTips1">
									</th>
									<td id="responseTips2"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<h5>说明</h5>
				<div class="tips-container">
					1.主要目的为给接口人员调试接口是否能被ajax正常访问
					<br /> 2.只开通了JSON格式访问的功能,PC端请用Chrome浏览器调试s
					<br /> 3.POST请求时支持两种参数方式,第一种是用键值配对,通过formdata发送,第二种是将参数转为字符串,通过流send过去
					<br /> 4.Get请求时,会自动将JSON参数添加到url后方
					<br /> 5.请求示例1是测试GET请求例子,请求示例2是测试POST请求JSON参数例子,请求示例3是测试POST请求String参数例子,同时请求示例3也包括mock接口的校验
					<br /> 6.如果请求返回error{},而且没其他提示,请用chrom打开f12调试,然后寻找错误原因
					<br /> 7.接口校验的功能主要是为借口人员提供的,目的是校验两个接口地址的返回参数的结构是否一致
				</div>
				<i class="mui-icon mui-icon-plus container-toggle" id="debugTipsToggle">debug-tips</i>
				<div id="debug-tips-container" class="common-hidden">
					<h5>调试错误提示说明</h5>
					<div class="tips-container">
						<div class="item-tips">
							提示:No 'Access-Control-Allow-Origin' header is present on the requested resource
							<br /> 原因:接口没有解决跨域问题
							<br /> 解决方法:接口进行跨域配置
						</div>
						<div class="item-tips">
							提示:The 'Access-Control-Allow-Origin' header containers multiple values '*,*', but only one is allowed
							<br /> 原因:接口配置请求Origin时,重复配置了两次*
							<br /> 解决方法:去处多余的 配置
						</div>
					</div>
				</div>

			</div>
		</div>
		<script>
			SrcBoot.outSeaConfig();
		</script>
		<script>
			seajs.use('js/bizlogic/test/demo_test_interfaceAccess.js');
		</script>
	</body>

</html>